/***
 *  测试使用vant react版本组件库
 *
 *
 */
import React, { Component } from 'react'
import { Button, ShareSheet, Cell, ImagePreview } from 'react-vant'
export default class App extends Component {
  state = {
    visible: false
  }
  options = [
    { name: '微信', icon: 'wechat' },
    { name: '微博', icon: 'weibo' },
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' }
  ]
  images = [
    'https://img.yzcdn.cn/vant/apple-1.jpg',
    'https://img.yzcdn.cn/vant/apple-2.jpg',
    'https://img.yzcdn.cn/vant/apple-3.jpg'
  ]

  render() {
    return (
      <div>
        <Button type="primary">Primary</Button>
        <Button type="info">Info</Button>
        <Button type="default">Default</Button>
        <Button type="warning">Warning</Button>
        <Button type="danger">Dangeer</Button>
        <Cell
          isLink
          title="显示分享面板"
          onClick={() => this.setState({ visible: true })}
        />
        <ShareSheet
          visible={this.state.visible}
          options={this.options}
          title="立即分享给好友"
          onCancel={() => this.setState({ visible: false })}
          onSelect={(option, index) => {
            console.log('option', option)
            console.log('index', index)
            this.setState({ visible: false })
          }}
        />
        <Cell
          title="预览图片"
          isLink
          onClick={() =>
            ImagePreview.open({
              images: this.images,
              onChange: (index) => console.log(`当前展示第${index + 1}张`)
            })
          }
        />
      </div>
    )
  }
}
